<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Dom遍历</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            font-family: "微软雅黑", sans-serif;
        }
        .canvas{
            position:fixed;
            top: 500px;
            left: 0;
            z-index: 10;
        }
        #frm{
            padding:10px;
            border: 1px solid red;
        }
        #dom{
            width: 500px;
            height: 100px;
            margin: 0 auto;
            background-color: blue;
        }
        #dom1{
            width: 100%;
            height: 30px;
            background-image: url(baby.png);
        }
        #dom2{
            width: 30px;
            height: 100px;
            background-image: url(baby.png);
        }
        #dom3{
            width: 100px;
            height: 100px;
            background-image: url(baby.png);
            text-align: center;
        }
    </style>
</head>
<body>
<div id="frm">用户名:<input type="text" name="username" id="username">
    <a>aaa</a>
</div>
<div id="dom"></div>
<div id="dom1"></div>
<div id="dom2"></div>
<div id="dom3">center</div>
<h2>woqu</h2>
<p>aaaaaa<span>dddddd</span>cccccccccc<span>dfffffffffff</span></p>
<div style="height : 10px"></div>
<button id="screenBtn">点击截屏</button>
<script type="text/javascript" src="canvas_Screenshot.js"></script>
<script>
    window.onload = function(){
        var screenBtn = document.getElementById("screenBtn");
        bindButtonEvent(screenBtn, "click", canvasScreen.screen);
    };
    function bindButtonEvent(element, type, handler) {
        if(element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else {
            element.attachEvent('on' + type, handler);
        }
    }
</script>
</body>
</html>